<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./vanna.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./assets/index.css" rel="stylesheet">
    <script src="./assets/plotly-latest.min.js" type="text/javascript"></script>
    <title>Telchina.AI</title>
    <script src="./assets/auth.js"></script>
    <script src="./assets/api-client.js"></script>
    <script type="module" crossorigin src="./assets/index-d29524f4.js"></script>
    <link rel="stylesheet" href="./assets/index-b1a5a2f1.css">
  </head>
  <body class="bg-white dark:bg-slate-900">
    <div class="min-h-screen flex flex-col pt-16">
      <!-- 顶部导航 -->
      <nav class="fixed top-0 left-0 right-0 z-50 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex justify-between h-16">
            <div class="flex items-center">
              <img src="./telchina.svg" alt="Telchina.AI" class="h-8 w-8 mr-3">
              <h1 class="text-xl font-semibold text-gray-900 dark:text-white">Telchina.AI</h1>
            </div>
            <div class="flex items-center space-x-4">
              <a href="./index.html" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
                首页
              </a>
              <a href="./chat.html" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">AI对话</a>
              <a href="./quickqa.html" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">快速问答</a>
              <a href="./training.html" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">训练SQL</a>
              <a href="./templates.html" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">SQL模板</a>
              <button id="darkModeToggle" class="p-2 rounded-md text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
                <!-- 浅色模式图标 (全月) -->
                <svg id="lightModeIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
                <!-- 暗黑模式图标 (半月) -->
                <svg id="darkModeIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </nav>

      <!-- 主要内容区域 -->
      <div class="flex-1 flex items-center justify-center">
        <div class="text-center">
          <img src="./ai.svg" alt="Telchina.AI" class="h-24 w-24 mx-auto mb-8">
          <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">欢迎使用 Telchina.AI</h1>
          <p class="text-xl text-gray-600 dark:text-gray-400 mb-8">智能SQL生成和数据分析平台</p>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
            <!-- AI对话卡片 -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
              <div class="text-blue-600 dark:text-blue-400 mb-4">
                <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">AI对话</h3>
              <p class="text-gray-600 dark:text-gray-400 mb-4">与AI助手对话，自动生成SQL查询并执行</p>
              <a href="./chat.html" class="inline-flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                开始对话
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>

            <!-- 快速问答卡片 -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
              <div class="text-orange-600 dark:text-orange-400 mb-4">
                <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">快速问答</h3>
              <p class="text-gray-600 dark:text-gray-400 mb-4">输入问题，AI将为您生成智能答案</p>
              <a href="./quickqa.html" class="inline-flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                开始问答
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>

            <!-- 训练SQL卡片 -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
              <div class="text-green-600 dark:text-green-400 mb-4">
                <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">训练SQL</h3>
              <p class="text-gray-600 dark:text-gray-400 mb-4">管理训练数据，提升AI模型的准确性</p>
              <a href="./training.html" class="inline-flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                管理训练
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>

            <!-- SQL模板卡片 -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
              <div class="text-purple-600 dark:text-purple-400 mb-4">
                <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">SQL模板</h3>
              <p class="text-gray-600 dark:text-gray-400 mb-4">查看和管理预定义的SQL模板</p>
              <a href="./templates.html" class="inline-flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                查看模板
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <script src="./js/tailwind.min.js"></script>
    <script>
      // 更新图标显示
      function updateThemeIcon(isDark) {
        const lightIcon = document.getElementById('lightModeIcon');
        const darkIcon = document.getElementById('darkModeIcon');
        
        if (isDark) {
          // 暗黑模式：显示半月图标
          lightIcon.classList.add('hidden');
          darkIcon.classList.remove('hidden');
        } else {
          // 浅色模式：显示全月图标
          lightIcon.classList.remove('hidden');
          darkIcon.classList.add('hidden');
        }
      }
      
      // 初始化暗色模式
      const isDarkMode = localStorage.getItem('darkMode') === 'true';
      if (isDarkMode) {
        document.documentElement.classList.add('dark');
      }
      
      // 暗黑模式切换功能
      document.addEventListener('DOMContentLoaded', function() {
        // 初始化图标状态
        updateThemeIcon(isDarkMode);
        
        const darkModeToggle = document.getElementById('darkModeToggle');
        if (darkModeToggle) {
          darkModeToggle.addEventListener('click', function() {
            const isDark = document.documentElement.classList.toggle('dark');
            localStorage.setItem('darkMode', isDark.toString());
            updateThemeIcon(isDark);
          });
        }
      });
    </script>
  </body>
</html>
